import React, { useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { Button, NavBar, Space, Toast } from "antd-mobile";
import axios from "../../api/http";
import "./list.css";
import { InfiniteScroll, List } from "antd-mobile";
function Index() {
    // 列表
  let nav = useNavigate();
  const [sp] = useSearchParams();
  console.log(sp);
  const data = Object.fromEntries(sp);
  console.log(data);
  const start = sp.get("start");
  const end = sp.get("end");
  const get = async () => {
    const resp = await axios.get("/api/trip/airplane", {
      params: { start, end, page },
    });
    console.log(resp);
    setuser(user.concat(resp.data.data));
    setpage(page + 1);
  };
  useEffect(() => {
    get();
  }, []);
  const [user, setuser] = useState([]);
  const [page, setpage] = useState(1);
  // 2.点击车次列表信息跳转详情页(需要传递必要的参数),以确保详情页能够准确展示对应的详细信息
  const det = (value) => {
    nav(`/detail/:id?start=${start}&end=${end}`,{state:value});
  };

  return (
    <div>
      <div>
        <NavBar onBack={() => nav("/home")} style={{ backgroundColor: "gray" }}>
          {start}---{end}
        </NavBar>
      </div>
      <div style={{ backgroundColor: "#f2f2f2" }}>
        {/* 1.车次列表渲染，渲染可见区域的车次信息 */}
        {user.map((item, index) => {
          return (
            <div
              key={index}
              style={{
                backgroundColor: "#ffffff",
                margin: "10px",
                // width: "100%",
                // height: "65px",
              }}
              className="train"
              onClick={() => det()}
            >
                {/* 3.列表渲染的优化，长列表使用虚拟列表 */}
              <List header="" >
                <p>
                  <span style={{ margin: "10px" }}>{item.ast}</span>

                  <span style={{ margin: "10px" }}>{item.aat}</span>
                  <span style={{ margin: "10px" }}>{item.dst}</span>
                </p>

                <p>
                  <span style={{ margin: "10px" }}>{item.aasn}</span>
                  <span style={{ margin: "10px" }}>{item.sd}</span>
                  <span style={{ margin: "10px" }}>{item.dasn}</span>
                </p>
                <Button style={{backgroundColor:'#f2f2f2'}}>车次已售完，可抢票</Button>
              </List>
            </div>
          );
        })}
      </div>
      {/* 3.列表渲染的优化，长列表使用虚拟列表 */}
      <InfiniteScroll loadMore={get} hasMore={true} />
    </div>
  );
}

export default Index;
